import type {GlobalTheme} from "naive-ui";
import {
    cardDark,
    darkTheme as naiveDarkTheme,
    drawerDark,
    elementDark,
    layoutDark,
    listDark,
    menuDark,
} from "naive-ui";
import {merge} from "lodash-es";

/**
 * @FileName: app-theme.ts
 * @Description: // 配置主题
 * @Author: Ellwood(liugangsin@qq.com)
 * @CreateDate: 2025/2/5 - 16:07
 * @Version: V1.0.0
 */

const commonColor: Record<string, any> = {
  bgColor: "#242525",
};

export const darkTheme: GlobalTheme = merge({}, naiveDarkTheme, {
  common: {
    baseColor: "#2A2C2C",
  },
  Layout: {
    ...layoutDark,
    self(_vars) {
      return {
        ...layoutDark.self?.(_vars),
        color: commonColor.bgColor,
        headerColor: commonColor.bgColor,
        siderColor: commonColor.bgColor,
        footerColor: commonColor.bgColor,
      };
    },
  },
  Card: {
    ...cardDark,
    self(_vars) {
      return {
        ...cardDark.self?.(_vars),
        color: commonColor.bgColor,
      };
    },
  },
  Drawer: {
    ...drawerDark,
    self(_vars) {
      return {
        ...drawerDark.self?.(_vars),
        color: commonColor.bgColor,
      };
    },
  },
  Menu: {
    ...menuDark,
    self(_vars) {
      return {
        ...menuDark.self?.(_vars),
        color: commonColor.bgColor,
      };
    },
  },
  List: {
    ...listDark,
    self(_vars) {
      return {
        ...listDark.self?.(_vars),
        color: commonColor.bgColor,
      };
    },
  },
  Element: {
    ...elementDark,
    common: {
      ...elementDark.common,
      baseColor: commonColor.bgColor,
    },
  },
} as Partial<GlobalTheme>);

export const layoutDarkTheme = darkTheme.Layout;

export const elementDarkTheme = darkTheme.Element;
